<template>
	<view class="main">
		<quick-button></quick-button>
		<!-- 有申请记录 -->
		<view v-if="list" class="application-record">
			<!-- 头部申请病床 -->
			<view class="application-record-top">
				<view style="font-size: 32rpx" class="application-record-top-text">申请记录</view>
				<button style="font-size: 32rpx" class="application-record-top-btn"
					@click="applicationfn">申请家庭病床</button>
			</view>

			<!-- card内容展示 -->
			<view class="card" v-for="(item, index) in list" :key="index">
				<!-- card标题信息 -->
				<view class="card-title">
					<view class="card-title-name">
						{{ item.patientName }}
					</view>
					<u-line direction="col" margin=" 0rpx 20rpx 0 20rpx" length="32rpx" color="#999999"></u-line>
					<view class="card-title-sex">
						{{ item.patientGender }}
					</view>
					<u-line direction="col" margin=" 0rpx 20rpx 0 20rpx" length="32rpx" color="#999999"></u-line>
					<view class="card-title-age">
						{{ item.patientAge }}
					</view>
					<view class="card-title-state">
						{{ item.stateNumber }}
					</view>
				</view>
				<!-- card主体内容 -->
				<view class="card-content">
					<view class="numbering">
						<view class="numbering-title">医保类型</view>
						<view class="numbering-number">
							{{ item.medicalNumber || '未填写' }}
						</view>
					</view>
					<view class="contact">
						<view class="contact-title">联系人</view>
						<view class="contact-number">{{ item.personName }} {{ item.personPhone }}</view>
					</view>
					<view class="dateapplication">
						<view class="dateapplication-title">申请日期</view>
						<view class="dateapplication-number">
							{{ item.applyDate }}
						</view>
					</view>
					<view class="dateapplication" v-if="item.state == '1.11'">
						<view class="dateapplication-title">取消原因</view>
					</view>
					<view class="dateapplication-number cancel-box" v-if="item.state == '1.11'">
						{{ item.cancelBedRemarks }}
					</view>
				</view>
				<!-- card底部内容 -->
				<view v-show="true" class="card-footer">
					<!-- <button v-if="item.delstate || item.state == '6.0' " class="delbtn" @click="delfn(item.bedId)" >删除</button> -->
					<button v-if="item.delstate" class="delbtn" @click="delfn(item.bedId)">删除</button>
					<view class="card-footer-btnbox">
						<button v-if="item.editstate" class="editbtn" @click="editfn(item.bedId)">编辑</button>
						<button
							v-if="item.state == '0.1' || item.state == '1.1' || item.state == '1.4' || item.state == '2.1'"
							class="viewbtn" @click="statefn(item)">
							查看原因
						</button>

						<button class="viewbtn" v-if="
							item.state == '4.0' ||
							item.state == '6.0' ||
							item.state == '1.3' ||
							item.state == '2.0' ||
							item.state == '3.0' ||
							item.state == '1.2' ||
							item.state == '2.2' ||
							item.bigHospital
						" @click="view(item)">
							查看详情
						</button>
						<button v-if="item.state == '5.0'" class="viewbtn" @click="statefn(item)">去确认</button>
					</view>
				</view>
				<!-- <view v-show="true" class="card-footer" v-if="item.stateNumber == '4.0' || item.stateNumber == '6.0'">
					<button class="viewbtn" @click="statefn(item)" >查看详情</button>
				</view>
				<view v-show="true" v-if=" item.stateNumber == '5.0'" class="card-footer">
					<button class="viewbtn" @click="statefn(item)" >去确认</button>
				</view> -->
			</view>
		</view>
		<!-- 无申请记录 -->
		<view v-if="list.length == 0" class="application-record-null">
			<view class="no-mess">
				<image style="width: 260rpx; height: 260rpx"
					src="https://applet.youtuyiliao.com/profile/avatar/2022/12/29/725361bb9d1570bcfe07923a3205485.png"
					mode="">
				</image>
			</view>
			<button class="application" @click="applicationfn">申请家庭病床</button>
		</view>

		<!-- 确认删除的弹框 -->
		<u-modal @confirm="confirm" @cancel="cancel" @close="close" :closeOnClickOverlay="true" :show="show"
			:title="title" showCancelButton></u-modal>
		<u-popup :show="showRegion" mode="center" :mask-close-able="false">
			<view style="width: 700rpx; height: 600rpx">
				<view style="width: 700rpx; margin: 30rpx 0; color: red; text-align: center; padding: 60rpx">
					检测到您未设置区域，请先选择所属区域再申请病床！</view>
				<view style="display: flex; align-items: center; gap: 20rpx; margin-top: 20rpx">
					<view style="width: 200rpx; text-align: right">区域:</view>
					<uni-data-picker style="width: 400rpx" placeholder="请选择区域" :localdata="regionList" v-model="region"
						:map="map"></uni-data-picker>
				</view>
				<view v-if="!region"
					style="width: 700rpx; margin: 30rpx 0; color: red; text-align: center; padding: 30rpx">
					{{ message }}
				</view>
				<button style="margin: 20rpx 200rpx; border-radius: 40rpx" @click="submit()">提交</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getapplication, deleteRecord, queryAllRegion, wxRegister, getUserMessage } from '@/api/feixiang/application.js';
import { getToken } from "@/utils/auth.js"
export default {
	data() {
		return {
			show: false, //弹框显示
			statetext: '', //根据状态切换按钮文字
			emptyShow: true, //无数据状态显示/隐藏  true显示，false隐藏
			title: '确定要删除吗？',
			pageNumber: 1,
			pageSize: 10,
			bedId: '', //bedid
			list: [],
			// editstate:false,
			showRegion: false,
			region: '',
			regionList: [],
			map: {
				text: 'regionName',
				value: 'regionName'
			},
			message: '',
			token: getToken(),
		};
	},
	onLoad() {
		this.statetextchange(1);
		// this.initdata()
		// this.initdata()
	},
	onShow() {
		// if (!this.token) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '请重新登录!',
		// 		delay: 1500
		// 	})
		// 	setTimeout(() => {
		// 		uni.setStorageSync("nav_to_index_index", 1)
		// 		uni.reLaunch({ url: "/pages/index/index" })
		// 	}, 2000)
		// 	return
			
		// }
		// if (!uni.getStorageSync('region')) {
		// 	this.showRegion = true;
		// 	this.queryAllRegion();
		// }
		this.initdata();
	},
	methods: {
		// 跳转到首页
		// goHome() {
		// 	uni.reLaunch({
		// 		url: '/pages/feixiang/home/Home'
		// 	});
		// },
		async initdata() {
			const res = await getapplication(this.pageNumber, this.pageSize);
			this.list = res.data.records;
			console.log(res.data.records);
			res.data.records.forEach((ele) => {
				if (ele.ifHospital === '1') {
					//大医院转出的
					if (ele.state === '0.0') {
						ele.editstate = true;
						ele.delstate = true;
					} else if (ele.state === '0.1') {
						ele.editstate = true;
						ele.delstate = true;
					} else if (ele.state === '1.0') {
						ele.bigHospital = true;
					} else {
						ele.editstate = false;
						ele.delstate = false;
					}
				} else {
					//非大医院转出的
					if (ele.state === '1.0') {
						ele.editstate = true;
						ele.delstate = true;
					}
				}
			});
			if (res.data.records.length === 0) {
				this.emptyShow = false;
			}
		},
		applicationbtn() {
			console.log(123444);
		},
		// 删除
		delfn(val) {
			this.show = true;
			this.bedId = val;
		},
		// 编辑
		editfn(val) {
			uni.navigateTo({
				url: `/sickbed/pages/feixiang/application-family-bad/application-family-bad?bedId=${val}`
			});
		},
		view(val) {
			uni.navigateTo({
				url: `/sickbed/pages/feixiang/evaluate/evaluate?bedId=${val.bedId}`
			});
		},
		// 根据状态跳转对应页面
		statefn(val) {
			if (val.state === '1.4' || '0.1') {
				uni.navigateTo({
					url: `/sickbed/pages/feixiang/evaluate/evaluate?bedId=${val.bedId}`
				});
			} else {
				uni.navigateTo({
					url: `/sickbed/pages/feixiang/evaluate/evaluate?bedId=${val.bedId}`
				});
			}
		},
		// 弹窗点击确认时触发
		async confirm() {
			const res = await deleteRecord(this.bedId);
			if (res.code === 200) {
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				});
				this.initdata();
			}
			this.show = false;
		},
		// 弹窗点击取消时触发
		cancel() {
			this.show = false;
		},
		// 弹窗点击遮罩层时时触发
		close() {
			this.show = false;
		},
		// 根据状态切换按钮文字
		statetextchange(val) {
			if (val === 1) {
				this.statetext = '查看原因';
			}
		},

		// 申请家庭病床
		applicationfn() {
			if (!this.token) {
				uni.showToast({
					icon: 'none',
					title: '请重新登录!',
					delay: 1500
				})
				setTimeout(() => {
					uni.setStorageSync("nav_to_index_index", 1)
					uni.reLaunch({ url: "/pages/index/index" })
				}, 2000)
				return
			}
			uni.navigateTo({
				url: '/sickbed/pages/feixiang/application-family-bad/application-family-bad'
			});
		},
		async queryAllRegion() {
			const res = await queryAllRegion({});
			this.regionList = res.data;
		},
		async submit(e) {
			let that = this;
			if (this.region) {
				const res = await wxRegister({
					region: this.region
				});
				this._getUserMessage();
			} else {
				console.log(1111);
				this.message = '区域选择为空';
			}
		},
		async _getUserMessage() {
			const res = await getUserMessage();
			if (res.data.region) {
				uni.setStorageSync('region', res.data.region);
				this.showRegion = false;
			} else {
				uni.setStorageSync('region', '');
			}
		}
	}
};
</script>
<style>
page {
	background-color: #fff;
}
</style>
<style scoped>
/* 穿透样式 */
.no-mess {
	position: absolute;
	left: 50%;
	top: 140rpx;
	transform: translateX(-50%);
}

::v-deep uni-page-head .uni-page-head__title {
	font-weight: 700 !important;
}

::v-deep .u-empty {
	padding-top: 100rpx !important;
}

.detailTwo {
	margin-left: 50%;
	transform: translateX(-50%);
	/* right: 0px !important; */
}

.main {
	padding: 0 32rpx;
}

.application {
	width: 340rpx;
	height: 96rpx;
	line-height: 96rpx;
	border-radius: 60rpx;
	background-color: #00bcb2;
	background-image: linear-gradient(to right, #ec443f, #ec9112);
	color: #fff;
	margin-top: 340rpx;
	font-size: 32rpx;
}

.application-record-top {
	display: flex;
	justify-content: space-between;
	padding: 32rpx 0 30rpx 0;
}

.application-record-top-text {
	flex: 1;
	line-height: 2;
}

.application-record-top-btn {
	font-size: 24rpx;
	width: 258rpx;
	height: 68rpx;
	border-radius: 38rpx;
	line-height: 68rpx;
	background-color: #fff;
	color: #00bcb2;
	border: 2rpx solid #00bcb2;
}

/* 卡片部分 ---审核中*/
.card {
	/* height: 312rpx; */
	background-color: #fff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 20rpx;
	box-shadow: 0rpx 5rpx 14rpx 2rpx rgba(0, 0, 0, 0.1);
}

.card-title {
	display: flex;
	border-bottom: 4rpx solid #f7f7f7;
	padding-bottom: 20rpx;
	align-items: center;
}

.card-title-name {
	font-size: 32rpx;
	color: #333;
	font-weight: 600;
}

.card-title-sex {
	color: #777;
}

.card-title-age {
	color: #777;
}

.card-title-state {
	color: #00bcb2;
	font-size: 28rpx;
	flex: 1;
	text-align: right;
}

.numbering {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
	font-size: 32rpx;
}

.numbering-title {
	color: #777;
}

.contact {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
	font-size: 32rpx;
}

.contact-title {
	color: #777;
}

.dateapplication {
	display: flex;
	justify-content: space-between;
	margin: 20rpx 0;
	font-size: 32rpx;
}

.dateapplication-title {
	color: #777;
}

.card-footer {
	border-top: 4rpx solid #f7f7f7;
	padding: 28rpx 0 0 0;
	/* position: relative; */
	display: flex;
	justify-content: space-between;
	/* height: 90rpx; */
}

.card-footer-btnbox {
	display: flex;
	width: 100%;
	justify-content: flex-end;
}

.delbtn {
	/* display: inline-block; */
	color: red;
	width: 80rpx;
	height: 64rpx;
	line-height: 64rpx;
	border: none;
	background-color: #fff;
	/* text-align: left; */
	font-size: 28rpx;
	padding: 0;
	margin: 0;
	/* position: absolute; */
	/* left: 10rpx; */
}

.editbtn {
	/* display: inline-block; */
	width: 160rpx;
	height: 64rpx;
	background-color: #fff;
	line-height: 64rpx;
	font-size: 28rpx;
	padding: 0;
	border-radius: 36rpx;
	/* position: absolute; */
	/* right: 10rpx; */
	border: 2rpx solid #999999;
	margin: 0;
}

.viewbtn {
	/* display: inline-block; */
	width: 160rpx;
	height: 64rpx;
	background-color: #fff;
	line-height: 64rpx;
	font-size: 28rpx;
	padding: 0;
	border-radius: 36rpx;
	/* right: 0; */
	border: 2rpx solid #999999;
	margin: 0;
	margin-left: 20rpx;
}

.cancel-box {
	/* overflow: hidden; */
	/* max-width: 620rpx; */
	/* padding-left: 146rpx; */
	margin-bottom: 10rpx;
	font-size: 32rpx;
	/* 		text-overflow: ellipsis; */
	/* white-space: nowrap; */
	/* max-height: 300rpx; */
}
</style>
